//渲染四个框
async function getStudent() {
  const res = await axios({
    url: "/student/overview",
  });
  // console.log(res);
  const { avgAge, avgSalary, proportion, total } = res.data.data;
  document.querySelector(".avgAge").innerHTML = avgAge;
  document.querySelector(".avgSalary").innerHTML = avgSalary;
  document.querySelector(".proportion").innerHTML = proportion;
  document.querySelector(".total").innerHTML = total;
}
getStudent();
getList();
getBatch()

//渲染折线图
function getList1(list) {
    // const data = res.data.data;
  const nameList = list.map((item) => item.name);
  const salaryList = list.map((item) => item.salary);
  const truesalaryList = list.map((item) => item.truesalary);
  const myChart = echarts.init(document.querySelector(".line"));
  const option = {
    color: ["red", "blue"],
    title: {
      text: "薪资 salary",
    },
    legend: {},
    xAxis: {
      type: "category",
      data: nameList,
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        name: "期望薪资",
        data: salaryList,
        type: "line",
        symbol: "circle",
        smooth: true,
        symbol:'none'
      },
      {
        name: "实际薪资",
        data: truesalaryList,
        type: "line",
        symbol: "circle",
        smooth: true,
        symbol:'none'
      },
    ],
    dataZoom: [
      {
        // 滑块开始的位置
        start: 0,
        // 滑块结束位置
        end: 30,
      },
    ],
  };
  myChart.setOption(option);
}
//获取学生数据
async function getList() {
  const res = await axios({
    url: "/student/list",
  });
  console.log(res);
getList1(res.data.data)
getPie(res.data.data); // 渲染籍贯
}
//渲染柱状图
async function getBatch(batch=1) {
    const res=await axios({
        url:`/score/batch`,
        params:{batch}
    })
    // console.log(res);
    const {avgScore,group,gt60,gt80,lt60}=res.data.data
    const myChart = echarts.init(document.querySelector(".barChart"));
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["平均分", "低于60分人数", "60到80分之间", "高于80分人数"],
        },
        xAxis: [
          {
            type: "category",
            data: group,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "Precipitation",
            min: 0,
            interval: 10,
            max: 100,
            axisLabel: {
              formatter: "{value} 分",
            },
          },
          {
            type: "value",
            // name: "Temperature",
            min: 0,
            interval: 1,
            max: 10,
            axisLabel: {
              formatter: "{value} 人",
            },
          },
        ],
        series: [
          {
            name: "平均分",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 分";
              },
            },
            data: avgScore,
          },
          {
            name: "低于60分人数",
            type: "bar",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 人";
              },
            },
            data: lt60,
          },
          {
            name: "60到80分之间",
            type: "bar",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 人";
              },
            },
            data: gt60,
          },
          {
            name: "高于80分人数",
            type: "bar",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 人";
              },
            },
            data: gt80,
          },
        ],
        grid: {
            // top 设置 图表距离 顶部距离
            // bottom 设置 图表距离 底部距离
            top: 20,
            bottom: 20,
          },
      };
      myChart.setOption(option);
}
//渲染饼图

async function getPie(list) {
    const newList = [];
    // for (let index = 0; index < list.length; index++) {
    //   const ele = list[index];
    //   const i = newList.findIndex((item) => item.name === ele.province); // 找不到返回-1
    //   if (i === -1) {
    //     newList.push({ value: 1, name: ele.province });
    //   } else {
    //     newList[i].value++;
    //   }
    // }
    for (let index = 0; index < list.length; index++) {
        const ele = list[index];
        const i=newList.findIndex(item=>ele.province===item.name)
        if (i===-1) {
            newList.push({value:1,name:ele.province})
        } else {
            newList[i].value++
        }
    }
    const myChart = echarts.init(document.querySelector(".pie"));
    option = {
        title: {
            text: "籍贯 ",
          },
      tooltip: {
        trigger: 'item',
    formatter: '{a} <br/>{b} : {c}人  占比{d}%'
      },
series: [
  {
    name: '各地人员分布',
    type: 'pie',
    radius: [30, 120],
    center: ['50%', '50%'],
    roseType: 'area',
    itemStyle: {
      borderRadius: 8
    },
    data: newList
  }
]
};
    myChart.setOption(option);
}
const batch=document.querySelector('#batch')
document.querySelector('#toggleBatchBtn').addEventListener('click',function(e){
    batch.classList.toggle('show')
})
batch.addEventListener('click',function(e){
    const batch=e.target.dataset.index
    getBatch(batch)
})